<template>
  <div class="map-container">
    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "3e9d4aa4e06f36dea5786c22e25bf90b", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",
        // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        // plugins: ["AMap.AdvancedInfoWindow", "AMap.PlaceSearch", "AMap.Scale"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          let map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 15, //初始化地图级别
            center: [102.725123,25.028924], //初始化地图中心点位置
            // isCustom: true,
          });
          // 创建一个 Marker 实例：
            var marker = new AMap.Marker({
            position: new AMap.LngLat(102.725123,25.028924),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '昆明市官渡区证券大厦'
        });
        // 将创建的点标记添加到已有的地图实例：
        map.add(marker);
        marker.on('click',function(e){
        console.log('当前位置是:官渡区'); 
        var infoWindow = new AMap.InfoWindow({ //创建信息窗体
        isCustom: true,  //使用自定义窗体
        content:`<div style="background:#fff;color:red;padding:10px;"
        >昆明市官渡区证券大厦</div>`, //信息窗体的内容可以是任意html片段
        offset: new AMap.Pixel(12, -45),
    });
    
        infoWindow.open(map, e.target.getPosition())
        //打开信息窗体
        //e.target就是被点击的Marker
})
          AMap.plugin(
            [
              "AMap.ToolBar",
              "AMap.Scale",
              "AMap.HawkEye",
              "AMap.MapType",
              "AMap.Geolocation",
            ],
            function () {
              // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
              map.addControl(new AMap.ToolBar());

              // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
              map.addControl(new AMap.Scale());

              // // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
              // map.addControl(new AMap.HawkEye({isOpen:true}));

              // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
              map.addControl(
                new AMap.MapType({
                  position: "LT",
                  offset: [100, 10],
                })
              );

              // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
              map.addControl(
                new AMap.Geolocation({
                  position: "LB",
                  offset: [140, 10],
                })
              );
            }
          );
        })
        .catch((e) => {
          console.log(e);
        });
    },

    // 同时引入工具条插件，比例尺插件和鹰眼插件
  },
};
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 650px;
  padding-top:60px;
}
#container {
  width: 100%;
  height: 100%;
  border: 1px solid black;
}
</style>